<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css"  >
    <script src="../js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="../plugins/elementui/index.js"></script>

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: left;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 590px;
        }
    </style>
</head>
<body>

<div id="div">

<el-container>
    <el-header>
        头部
    </el-header>

    <el-container>
        <el-aside width="200px">
            侧边栏
        </el-aside>

        <el-container>
        <el-main>
            main
        </el-main>

        <el-footer>
            footer
        </el-footer>
        </el-container>

    </el-container>
</el-container>


</div>


<script>
    new Vue({
        el:"#div"
    })
</script>
</body>
</html>